<template>
  <div style="background-color: white">
    <carousel :carouselList="carouselList"></carousel>
    <div style="padding: 30px 88px 50px 88px" class="index-body">
      <div style="display: flex; justify-content: space-between; align-items: center">
        <div style="display: flex; align-items: end">
          <div :class="flag == 1 ? 'active' : 'normal'" @click="clickTabs(1)">
            {{ $store.state.locale == "zh-cn" ? "赛事合作" : "Competition Cooperation" }}
          </div>
          <div
            :class="flag == 2 ? 'active' : 'normal'"
            @click="clickTabs(2)"
            style="margin-left: 30px"
          >
            {{ $store.state.locale == "zh-cn" ? "新闻活动" : "News and Events" }}
          </div>
        </div>
        <div style="color: #666666; font-size: 14px">
          <span style="cursor: pointer" @click="$router.push('/index')">{{
            $store.state.locale == "zh-cn" ? "首页" : "Home"
          }}</span>
          > {{ $store.state.locale == "zh-cn" ? "多威动态" : "DO-WIN Dynamics" }} >
          <span style="color: #000000; font-weight: bold" v-show="flag == 1">{{
            $store.state.locale == "zh-cn" ? "赛事合作" : "Competition Cooperation"
          }}</span>
          <span style="color: #000000; font-weight: bold" v-show="flag == 2">{{
            $store.state.locale == "zh-cn" ? "新闻活动" : "News and Events"
          }}</span>
        </div>
      </div>
      <div style="margin-top: 30px" v-if="flag == 1">
        <div
          @click="detail(item)"
          style="margin-bottom: 40px; display: flex"
          v-for="(item, index) in info.data"
          :key="index"
        >
          <div style="min-width: 340px; height: 180px; position: relative">
            <div
              v-if="flag == 1"
              style="
                position: absolute;
                bottom: 16px;
                right: 16px;
                padding: 3px 8px;
                border-radius: 3px;
                display: flex;
                justify-content: center;
                align-items: center;
                background: rgba(0, 0, 0, 0.5);
                color: white;
                font-size: 12px;
                font-weight: 400;
                z-index: 3;
              "
            >
              1/{{ item.images.length }}
            </div>
            <el-image
              v-if="flag == 1"
              style="width: 340px; height: 180px; border-radius: 10px"
              :src="item.images[0]"
              fit="cover"
              :preview-src-list="item.images"
            >
            </el-image>

            <!-- <el-image
              v-if="flag == 2"
              style="width: 340px; height: 180px; border-radius: 10px"
              :src="item.images[0]"
              fit="cover"
            >
            </el-image> -->
          </div>
          <div style="margin-left: 40px">
            <div style="font-weight: bold; font-size: 18px">
              {{ item.title }}
            </div>
            <div style="font-size: 12px; margin-top: 10px">{{ item.createtime }}</div>
            <div style="margin-top: 20px; font-size: 16px; line-height: 28px">
              {{ item.subtitle }}
            </div>
            <!-- <div
              style="margin-top: 20px; font-size: 16px; line-height: 28px"
              v-if="flag == 2"
            >
              {{ item.subtitle }}
            </div> -->
          </div>
        </div>
      </div>
      <div class="index-list" style="margin-top: 30px" v-if="flag == 2">
        <div
          class="index-list-item"
          v-for="(item, key) in info.data"
          :key="key"
          @click="detail(item)"
        >
          <el-image :src="item.images[0]" fit="cover" class="index-list-cover"></el-image>
          <div class="index-list-body">
            <div class="index-list-body-top index-list-body-top1">
              <div class="index-list-body-top-left">
                <div class="index-list-body-top-left-day">22</div>
                <div class="index-list-body-top-left-date">06-2022</div>
              </div>
              <div>
                <div class="index-list-body-title">{{ item.title }}</div>
                <div class="index-list-body-memo">{{ item.subtitle }}</div>
              </div>
            </div>
            <div class="index-list-body-bottom">
              <img
                src="https://jy-shops.oss-cn-beijing.aliyuncs.com/0dwgw/enterprise/enter4.png"
                class="index-list-body-bottom-icon"
              />
              <div style="flex: 1"></div>
              <div class="index-list-body-bottom-more">MORE</div>
            </div>
          </div>
        </div>
      </div>
      <div style="width: 100%; display: flex; justify-content: center">
        <el-pagination background layout="prev, pager, next" :total="info.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import carousel from "@/components/carousel.vue";
export default {
  components: {
    carousel,
  },
  data() {
    return {
      banner: [],
      flag: 1,
      url: "",
      srcList: [],
      name: "",
      params: {
        limit: 10,
        page: 1,
      },
      info: {},
      carouselList: [],
    };
  },
  mounted() {
    this.name = this.$route.query.name;
    this.getFlag();
    this.getCarousel();
  },
  watch: {
    $route(to, from) {
      console.log(23232);
      this.name = this.$route.query.name;
      this.getFlag();
      // this.$nextTick(() => {
      //   this.getFlag();
      // });
      // 在mounted函数执行的方法，放到该处
      // 加载页面数据的方法
    },
  },
  computed: {
    language() {
      return this.$store.state.locale;
    },
  },
  methods: {
    getCarousel() {
      this.ajaxs("index/slides?translate=" + this.language, {
        data: {
          classify: 4,
        },
        success: (res) => {
          this.carouselList = res.data;
        },
      });
    },
    getFlag() {
      if (this.name == "新闻活动") {
        this.flag = 2;
      } else {
        this.flag = 1;
      }
      this.getData();
    },
    getData() {
      if (this.flag == 1) {
        this.ajaxs("index/competition?translate=" + this.language, {
          data: this.params,
          success: (res) => {
            this.info = res.data;

            console.log(this.info);
          },
        });
      } else {
        this.ajaxs("index/newsList?translate=" + this.language, {
          data: this.params,
          success: (res) => {
            this.info = res.data;

            console.log(this.info);
          },
        });
      }
      this.$forceUpdate();
    },
    clickTabs(i) {
      this.flag = i;

      this.getData();
    },
    detail(item) {
      if (this.flag == 2) {
        //新闻活动详情
        this.$router.push("/dynamic/detail?id=" + item.id);
      }
    },
  },
};
</script>

<style scoped>
@import "../../assets/css/index/index.css";
.active {
  font-size: 20px;
  font-weight: bold;
}
.normal {
  color: #bebebe;
  font-size: 18px;
}
/deep/ .el-carousel__indicators .is-active .el-carousel__button {
  width: 24px;
  height: 24px;
  background: #ffffff;

  border-radius: 50%;
}
/deep/ .el-carousel__indicators .el-carousel__button {
  background: rgba(255, 255, 255, 0.4);
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #c91d1d;
}
@import "../../assets/css/enterprise/index.css";
</style>
